<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>非父子组件之间通信</title>
</head>
<body>

<div id="app">
    {{ message }}
    <my-component></my-component>
</div>

<hr>

<div id="app1">
    {{ message }}
    <my-component></my-component>
</div>

<hr>


<div id="app2">
    <button type="button" @click="handleRef">通过ref来获取子组件的实例</button>
    <my-component ref="comA"></my-component>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /**
     * V2.x推荐使用一个空的Vue实例作为中央事件总线(bus)，其实就是一个中介，用于实现不同级组件之间的通信。
     * 其实这种方法Vue1.x和2.x都适用，它实现了任何组件之间的通信，包括父子、兄弟、跨级等。
     * 如果深入使用可以扩展bus实例，给它添加data、methods、computed等选项，这些都是可以共用的。
     * 在业务中，尤其是协同开发非常有用。在单页面复应用（SPA）中非常实用。不过项目较大时，推荐使用状态管理vuex。
     **/



    /**
     *
     * 首先创建了一个名为bus的空Vue实例，里面没有任何内容；然后全局定义了组件my-component；
     * 最后创建Vue的实例app，在app初始化时，也就是在生命周期mounted钩子函数里监听了来自bus事件的on-message，
     * 而在组件my-component中，点击按钮会通过bus把事件on-message发出去，此时app就会接收到来自bus的事件，进而在回调里完成自己的业务逻辑。
     * **/
     var bus = new Vue();

     Vue.component("my-component",{
         template:"<button type='button' @click='handleEvent'>传递事件</button>",
         methods:{
             handleEvent:function () {
                 bus.$emit('on-message',"这是来自组件my-component的内容");
             }
         }
     });

     var app = new Vue({
         el:"#app",
         data:{
             message:"",
         },
         mounted:function () {
             var _this = this;
             //在实例初始化时，监听来自bus实例的事件
             bus.$on('on-message',function (msg) {
                 _this.message=msg;
             })
         }
     });



     /**
      * 除了中央事件总线bus外，还有两种方法可以实现组件间的通信：父链和子组件索引。
      * **/

      /**
       * 父链：在子组件中，使用this.$parent可以直接访问该组件的父实例或者父组件，父组件也可以通过this.$children来访问它所有的子组件，
       * 而且可以递归向上或向下无限访问，直到根实例或最内层的组件。
       *
       *
       * 尽管Vue允许这种操作，但是在实际业务中应该尽可能地避免依赖组件的数据，更不应该主动去修改它的数据，因为这样使得父子组件紧紧耦合，
       * 仅仅看父组件是很难理解父组件的状态，因为它可能被任意组件修改，在理想情况下，只有组件自己才能修改自己的状态。
       * 因此父子组件最好还是通过props和$emit()方法来进行通信。
       * **/

       Vue.component("my-component",{
           template:"<button type='button' @click='handleEvent'>通过父链直接修改数据</button>",
           methods:{
               handleEvent:function () {
                   //访问父链后可以进行任何操作，如直接修改数据
                   this.$parent.message = "这是来自组件my-component的内容";
               }
           }
       });

       var app1 = new Vue({
           el:"#app1",
           data:{
               message:"这是父组件的内容",
           }
       });






    /**
     *
     * 子组件索引：当组件较多时，通过this.$children来一一遍历出我们需要的一个组件实例其实是比较困难的，尤其是组件动态渲染时，
     * 它们的序列是不固定的。Vue提供了子组件索引的方法，用特殊的属性ref来为子组件指定一个索引名称。
     *
     * **/

     Vue.component("my-component",{
         template:"<div>子组件</div>",
         data:function () {
             return{
                 message:"子组件内容",
             }
         }
     });

     var app2 = new Vue({
         el:"#app2",
         methods:{
             handleRef:function () {
                 //通过this.$refs来访问指定的实例
                 var msg = this.$refs.comA.message;
                 console.log(msg);
             }
         }
     });

    /**
     *
     * 在父组件模板中，子组件标签上使用ref指定一个名称，并在父组件内通过this.$refs来访问指定名称的子组件。
     *注意$refs只在组件渲染完成后才进行填充，并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案，应当避免在模板或计算属性中使用$refs。
     *
     * **/

</script>
</body>
</html>